<template>
    <div class="search-bar">
        <input class="search-input" type="text" placeholder="搜索" />
    </div>
</template>

<script lang="ts" setup></script>

<style lang="scss" scoped>
.search-bar {
    width: 302px;
}
.search-input {
    height: 28px;
    width: 100%;
    border: none;
    outline: none;
    background: var(--section-color) url('~@/assets/image/Oval@2x.png') no-repeat 10px center / 14px;
    border-radius: var(--border-radius);
    padding: 0 12px 0 32px;

    &::placeholder {
        color: var(--font-color-dim);
    }
}
</style>
